<template>
	<Teleport to="body">
		<div class="qptk" v-if="props.show && flag">
			<BorderBox13  backgroundColor="#153455a1">
				<div style="padding: 10px; ">
				<div class="qp"  @click="gb"></div>
				<div v-if="props.show && flag" >
					<div class="topTitle">
						<div style="color: #fff;">
							<slot name="title">{{ props.title }}</slot>
						</div>
						<div>
							<slot name="titleBox"></slot>
							<div class="close" @click="gb"></div>
						</div>
						
					</div>
					<Decoration2 style="width:100%; height:5px;" />
					<div style="padding-top: 15px;">
						<slot name="content">
							<div style="width=100%;text-align:center">
								<img src="@/assets/zwnr.png" width="50" />
							</div>
						</slot>
					</div>
				</div></div>
			</BorderBox13>
		</div>
	</Teleport>
</template>

<script lang="ts" setup>
	import { BorderBox13,Decoration2 } from "@kjgl77/datav-vue3"
	import { defineProps, onMounted, reactive, ref, toRef, toRefs, defineExpose, computed, defineEmits } from "vue"

	let props = defineProps({
		show: {
			default: false,
			type: Boolean
		},
		title: {
			default: "标题",
			type: String
		}
	})


	onMounted(() => {


	})
	let flag = ref(true)
	let emit = defineEmits(["close"])
	const gb = () => {
		// flag.value = false
		emit("close")
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.qptk {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 50vw;
		height: 50vh;
		transform: translate(-50%, -50%);
		/* z-index: 500; */
		/* background-color: #0d226f; */
		
	}

	.qp {
		position: absolute;
		top: 0;
		left: 0;
		/* width: 100vw;
		height: 100vh;
		 */
		z-index: 400;
		background-color: #84838a4d;
	}

	.close {
		width: 20px;
		height: 20px;
		/* border: 1px solid #84838a4d; */
		background-image: url("../../assets/close.png");
		background-size: contain;
		margin-top: 15px;
	}

	.topTitle {
		display: flex;
		justify-content: space-between;
		line-height: 50px;
		padding: 0px 10px;
		/* border-bottom: 1px solid #fff; */
	}
</style>